<style rel="stylesheet/scss" lang="scss" scoped>
.base_attr_wrap{
    display: flex;
    .label{
        flex: 2;
    }
    .select_vals {
        display: flex;
        justify-content: flex-start;
        flex: 8;
        
    }
    .show_desc {
        display: flex;
        justify-content: flex-start;
        flex: 1;
        margin-left: 10px;
    }
}
</style>

<template>
    <div>
        <!-- 窗口 -->
        <el-dialog title="规格维护" :visible.sync="visibleBaseAttr" :close-on-click-modal="false" @close="handleBaseAttrDialogClose">
            
            <el-tabs tab-position="left" style="width:98%; margin-bottom: 20px">
                <el-tab-pane
                :label="group.attrGroupName"
                v-for="(group, gidx) in dataResp.attrGroups"
                :key="group.attrGroupId">
                
                    <el-form ref="form" :model="dataResp">
                        <el-form-item v-for="(attr,aidx) in group.attrs" :key="attr.id">
                            <div class="base_attr_wrap">
                                <div class="label">
                                    {{attr.attrName}}
                                </div>
                                <div class="select_vals">
                                    <el-select
                                        v-model="dataResp.baseAttrs[gidx][aidx].attrValues"
                                        :multiple="attr.valueType == 1"
                                        filterable
                                        allow-create
                                        clearable
                                        default-first-option
                                        placeholder="请选择或输入值"
                                        style="width: 100%">
                                            <el-option
                                                v-for="(val,vidx) in attr.valueSelect.split(';')"
                                                :key="vidx"
                                                :label="val"
                                                :value="val">
                                            </el-option>
                                    </el-select>
                                </div>
                                <div class="show_desc">
                                    <el-checkbox
                                        v-model="dataResp.baseAttrs[gidx][aidx].showDesc"
                                        :true-label="1"
                                        :false-label="0"
                                    >快速展示</el-checkbox>
                                </div>
                            </div>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
            </el-tabs>

            <div slot="footer" class="dialog-footer">
                <el-button @click="visibleBaseAttr = false">取 消</el-button>
                <el-button @click="handleSubmitBaseAttr('form')" type="primary" :loading="submitLoading">提 交</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>

export default {
    data() {
        return {
            visibleBaseAttr: false,
            submitLoading: false,

            dataResp: {
                attrGroups: [],
                baseAttrs: []
            },
            spuAttrsMap: {},

            cateId: null,
            spuId: null
        }
    },
    
    mounted() {
    	this.$nextTick(function () {
    	})
    },
    methods: {
		init(cateId, spuId) {
            this.cateId = cateId
            this.spuId = spuId
            
            this.visibleBaseAttr = true
            if (this.cateId && this.spuId) {
                this.getCurBaseAttr()
            }
        },

        /**
         * 获取当前SPU规格属性
         */
        getCurBaseAttr() {
            this.$http({
                url: `/product/pmsattr/base/listforspu/${this.spuId}`,
                methods: 'get'
            }).then(res => {
                if (this.ResultMessage(res, false)) {
                    res.data.forEach(item => {
                        this.spuAttrsMap["" + item.attrId] = item;
                    });
                }
                this.getGroupBaseAttr()
            }).catch(error => {
                this.$notify({ title: '错误', message: error, type: 'error' });
            })
        },
        
        /**
         * 获取分类下的分组属性
         */
        getGroupBaseAttr() {
            this.$http({
                url: `/product/pmsattrgroup/${this.cateId}/withattr`,
                method: "get",
            }).then(res => {
                if (this.ResultMessage(res, false)) {
                    res.data.forEach(item => {
                        let attrArray = [];
                        if(item.attrs) {
                            let attrArray = [];
                            item.attrs.forEach(attr => {
                                let v = "";
                                if (this.spuAttrsMap[attr.id]) {
                                    v = this.spuAttrsMap[attr.id].attrValue.split(";");
                                    if (v.length == 1) {
                                        v = v[0];
                                    }
                                }
                                attrArray.push({
                                    attrId: attr.id,
                                    attrName: attr.attrName,
                                    attrValues: v,
                                    showDesc: this.spuAttrsMap[attr.id] ? this.spuAttrsMap[attr.id].quickShow : attr.showDesc
                                });
                            });

                            this.dataResp.baseAttrs.push(attrArray);
                        } else {
                            this.dataResp.baseAttrs.push([]);
                        }
                    });
                    this.dataResp.attrGroups = res.data;
                    
                }
            })
        },
        handleBaseAttrDialogClose() {
            this.clearData();
        },

        handleSubmitBaseAttr() {
            let submitData = [];
            this.dataResp.baseAttrs.forEach(item => {
                item.forEach(attr => {
                    let val = "";
                    if (attr.attrValues instanceof Array) {
                        val = attr.attrValues.join(";");
                    } else {
                        val = attr.attrValues;
                    }

                    if (val != "") {
                        submitData.push({
                            attrId: attr.attrId,
                            attrName: attr.attrName,
                            attrValue: val,
                            quickShow: attr.showDesc
                        });
                    }
                })
            }); 

            this.$confirm("修改商品规格信息, 是否继续?", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }) .then(() => {
                this.$http({
                    url: `/product/pmsattr/update/${this.spuId}`,
                    method: "post",
                    data: submitData
                }).then(res => {
                    this.visibleBaseAttr = false
                    this.$message({ type: "success", message: "属性修改成功!" });
                });
            }) .catch((e) => {
                this.$message({ type: "info", message: "已取消修改"+e });
            });
        },

        clearData(){
            this.dataResp.attrGroups = [];
            this.dataResp.baseAttrs = [];
            this.spuAttrsMap = {};
        }
		
    }
}
</script>